<template>
  <!-- 导航栏组件容器，extClass用于接收外部传入的额外样式类 -->
  <view class="weui-navigation-bar" :class="extClass">
    <!-- 导航栏内部主容器 
         动态设置样式：
         - paddingTop：状态栏高度，适配不同设备状态栏
         - height：导航栏总高度（含状态栏）
         - color：文字颜色，由外部传入
         - background：背景色，由外部传入
         - displayStyle：控制显示/隐藏的过渡样式
         - innerPaddingRight：右侧内边距，适配胶囊按钮位置
     -->
    <view 
      class="weui-navigation-bar__inner" 
      :style="{
        paddingTop: `${statusBarHeight}px`,
        height: `${navBarHeight}px`,
        color: color,
        background: background,
        ...displayStyle,
        ...innerPaddingRight,
      }"
    >
      <!-- 左侧区域：返回按钮或自定义内容 -->
      <view class='weui-navigation-bar__left' :style="leftWidth">
        <!-- 当back为true时显示默认返回按钮 -->
        <template v-if="back">
          <view class="navigation-bar__buttons" @click="handleBack" v-if="pageLen!=1">
            <view class="navigation-bar__button navigation-bar__btn_goback" hover-class="active"></view>
          </view>
		  <view class="navigation-bar__buttons" @click="handleBack" v-else>
		    <view class="navigation-bar__button navigation-bar__btn_gohome" hover-class="active"></view>
		  </view>
        </template>
        <!-- 当back为false时显示左侧插槽内容 -->
        <template v-else>
          <slot name="left"></slot>
        </template>
      </view>

      <!-- 中间区域：标题、加载动画或自定义内容 -->
      <view class='weui-navigation-bar__center'>
        <!-- 当loading为true时显示加载动画 -->
        <view v-if="loading" class="weui-navigation-bar__loading" aria-role="alert">
          <view 
            class="weui-loading" 
            :style="{width: `${size.width}rpx`, height: `${size.height}rpx`}" 
            aria-role="img" 
            aria-label="加载中"
          ></view>
        </view>
        <!-- 当有标题且不加载时显示标题文本 -->
        <template v-if="title && !loading">
			<slot>
				<text>{{ title }}</text>
			</slot>
        </template>
        <!-- 当无标题且不加载时显示中间插槽内容 -->
        <template v-else-if="!loading">
          <slot name="center"></slot>
        </template>
      </view>

      <!-- 右侧区域：自定义内容插槽 -->
      <view class='weui-navigation-bar__right'>
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';

// 定义组件接收的属性
const props = defineProps({
  // 外部传入的额外样式类
  extClass: {
    type: String,
    default: ''
  },
  // 导航栏标题文本
  title: {
    type: String,
    default: ''
  },
  // 导航栏背景色
  background: {
    type: String,
    default: ''
  },
  // 导航栏文字颜色
  color: {
    type: String,
    default: ''
  },
  // 是否显示默认返回按钮
  back: {
    type: Boolean,
    default: true
  },
  // 是否显示加载动画（会替代标题）
  loading: {
    type: Boolean,
    default: false
  },
  // 显示/隐藏时是否启用过渡动画
  animated: {
    type: Boolean,
    default: true
  },
  // 是否显示导航栏（隐藏时仍保留占位高度）
  show: {
    type: Boolean,
    default: true
  },
  // 返回按钮点击时的返回层级（navigateBack的delta参数）
  delta: {
    type: Number,
    default: 1
  }
});

// 定义组件触发的事件
const emit = defineEmits(['back']); // 点击返回按钮时触发，携带返回层级

// 响应式状态管理
const pageLen = ref(1); // 状态栏高度（不同设备不同）
const statusBarHeight = ref(0); // 状态栏高度（不同设备不同）
const innerPaddingRight = ref({}); // 右侧内边距样式（适配胶囊按钮）
const leftWidth = ref({}); // 左侧区域宽度样式（与右侧对称）
const navBarHeight = ref(0); // 导航栏总高度（含状态栏）
const displayStyle = ref({}); // 控制显示/隐藏的样式（动画或直接显示隐藏）
const size = ref({ width: 20, height: 20 }); // 加载动画的尺寸（rpx）

/**
 * 监听show属性变化，动态更新显示样式
 * - 当animated为true时：使用opacity过渡动画
 * - 当animated为false时：直接显示/隐藏（display属性）
 * immediate: true 表示初始化时立即执行一次
 */
watch(
  () => props.show,
  (newVal) => {
    if (props.animated) {
      displayStyle.value = {
        opacity: newVal ? '1' : '0',
        transition: 'opacity 0.5s'
      };
    } else {
      displayStyle.value = {
        display: newVal ? '' : 'none'
      };
    }
  },
  { immediate: true }
);

/**
 * 组件挂载后初始化：获取系统信息和胶囊按钮位置，计算导航栏相关尺寸
 * - 适配不同设备的状态栏高度、导航栏高度
 * - 保证左侧区域与右侧胶囊按钮区域宽度一致，视觉对称
 */
onMounted(() => {
	
	// console.log('getCurrentPages()',getCurrentPages().length);
	pageLen.value = getCurrentPages().length
  // 获取微信小程序右上角胶囊按钮的位置信息（用于计算导航栏尺寸）
  const rect = uni.getMenuButtonBoundingClientRect();
  // 获取系统信息（如状态栏高度、窗口宽度等）
  const res = uni.getWindowInfo();
  
  statusBarHeight.value = res.statusBarHeight; // 状态栏高度
  innerPaddingRight.value = {
    paddingRight: `${res.windowWidth - rect.left}px` // 右侧内边距=窗口宽度-胶囊按钮左坐标
  };
  leftWidth.value = {
    width: `${res.windowWidth - rect.left}px` // 左侧区域宽度=右侧内边距对应宽度（对称）
  };
  // 导航栏总高度=胶囊按钮底部坐标+顶部坐标-状态栏高度（胶囊按钮高度包含在导航栏内）
  navBarHeight.value = rect.bottom + rect.top - res.statusBarHeight;
});

/**
 * 处理返回按钮点击事件
 * 1. 调用uni.navigateBack执行页面返回（根据delta参数）
 * 2. 触发back事件，供父组件处理额外逻辑
 */
const handleBack = () => {
	if(pageLen.value==1){
		uni.reLaunch({
			url:'/pages/index/index'
		})
	}else if(props.delta) {
    uni.navigateBack({
      delta: props.delta
    });
  }
  emit('back', { delta: props.delta });
};
</script>

<style scoped>
/* 导航栏容器样式：全屏宽度，隐藏溢出内容 */
.weui-navigation-bar {
  overflow: hidden;
  color: rgba(0, 0, 0, 0.9);
  width: 100vw;
}

/* 占位区域样式（未直接使用，保留原样式结构） */
.weui-navigation-bar__placeholder {
  background: #f7f7f7;
  position: relative;
}

/* 内部容器和左侧区域基础布局：flex横向排列，垂直居中 */
.weui-navigation-bar__inner, .weui-navigation-bar__inner .weui-navigation-bar__left {
  display: flex;
  align-items: center;
  flex-direction: row;
}

/* 导航栏内部主容器样式：全屏宽度，盒模型计算边框 */
.weui-navigation-bar__inner {
  position: relative;
  padding-right: 95px;
  width: 100vw;
  box-sizing: border-box;
}

/* 左侧区域基础样式：固定宽度，左内边距，盒模型计算 */
.weui-navigation-bar__inner .weui-navigation-bar__left {
  position: relative;
  width: 95px;
  padding-left: 16px;
  box-sizing: border-box;
}

/* 返回按钮容器点击区域扩展样式（增大点击热区） */
.weui-navigation-bar__btn_goback_wrapper {
  padding: 11px 18px 11px 16px;
  margin: -11px -18px -11px -16px;
}

/* 返回按钮图标样式：使用svg背景图，固定尺寸 */
.weui-navigation-bar__inner .weui-navigation-bar__left .navigation-bar__btn_goback {
  font-size: 12px;
  width: 12px;
  height: 24px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
  background-size: cover;
}

.weui-navigation-bar__inner .weui-navigation-bar__left .navigation-bar__btn_gohome {
  font-size: 12px;
  width: 30px;
  height: 30px;
  background-image: url("data:image/svg+xml,%3Csvg t='1754616021905' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='6292' width='200' height='200'%3E%3Cpath d='M135.992 549.248a26.081 26.081 0 0 1-26.066-26.05 26.193 26.193 0 0 1 8.039-18.827l375.45-359.403a25.938 25.938 0 0 1 18.017-7.235 25.95 25.95 0 0 1 17.97 7.189L906.02 503.7c10.23 9.984 10.424 26.512 0.389 36.798a25.871 25.871 0 0 1-18.647 7.849 25.969 25.969 0 0 1-17.74-6.974l-358.544-341.56-357.484 342.2a25.856 25.856 0 0 1-17.976 7.235h-0.026z' fill='%232C2C2C' p-id='6293'%3E%3C/path%3E%3Cpath d='M296.028 881.92c-43.725 0-90.199-32.486-90.199-92.692V440.11a26.081 26.081 0 0 1 26.05-26.05 26.076 26.076 0 0 1 26.051 26.05v349.123c0 32.04 23.946 40.586 38.093 40.586h429.292c28.175 0 40.74-12.908 40.74-41.856V450.314c0-14.361 11.688-26.05 26.055-26.05s26.056 11.689 26.056 26.05v337.644c0 28.18-8.7 51.876-25.17 68.531-16.45 16.635-39.85 25.431-67.676 25.431H296.028z' fill='%232C2C2C' p-id='6294'%3E%3C/path%3E%3Cpath d='M589.814 881.92a26.086 26.086 0 0 1-26.056-26.056V680.75c0-19.528-6.876-26.788-25.37-26.788h-56.954c-14.94 0-21.192 3.39-21.192 24.397v177.516a26.076 26.076 0 0 1-26.05 26.05 26.081 26.081 0 0 1-26.051-26.05V678.359c0-47.903 27.402-76.503 73.293-76.503h56.96c47.063 0 77.475 30.97 77.475 78.9v175.113a26.086 26.086 0 0 1-26.055 26.051z' fill='%232C2C2C' p-id='6295'%3E%3C/path%3E%3C/svg%3E");
  background-size: 24px 24px;
  background-color: #dcdcdc;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
}

/* 中间标题区域样式：flex占满剩余空间，内容居中，粗体 */
.weui-navigation-bar__inner .weui-navigation-bar__center {
  font-size: 17px;
  text-align: center;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* 深色模式适配：调整文字颜色和背景色 */
@media (prefers-color-scheme: dark) {
  .weui-navigation-bar {
    color: hsla(0, 0%, 100%, 0.8);
  }
  .weui-navigation-bar__inner {
    background-color: #1f1f1f;
  }
}

/* 加载动画基础样式：圆形边框，顶部边框高亮 */
.weui-loading {
  display: inline-block;
  width: 20rpx;
  height: 20rpx;
  border: 3rpx solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #000;
  animation: weuiLoading 0.8s linear infinite; /* 旋转动画 */
}

/* 加载动画旋转关键帧 */
@keyframes weuiLoading {
  to {
    transform: rotate(360deg);
  }
}

/* 深色模式下加载动画适配：调整边框颜色 */
@media (prefers-color-scheme: dark) {
  .weui-loading {
    border-color: rgba(255, 255, 255, 0.1);
    border-top-color: #fff;
  }
}
</style>